<template>
    <div class="news">
        <!-- 表头按钮组 -->
        <div>
            <div style="float:left;">
                <el-button @click='addHandler' size='small'>新增</el-button>
            </div>
    
            <div style="float:right;">
                <el-form size='small' :inline="true" class="demo-form-inline">
                    <el-form-item>
                        <el-input v-model="params.title" placeholder="请输入标题"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="params.categoryId" placeholder="请选择所属栏目" clearable>
                        <el-option v-for='item in categories' :key='item.id' :label="item.name" :value="item.id"></el-option>
                        
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <!-- 表格 -->
        <el-table
            size='small'
            :data="tableData"
            style="width: 100%">
            <el-table-column
                prop="id"
                label="编号"
                width="80">
            </el-table-column>
            <el-table-column
                prop="title"
                label="标题">
            </el-table-column>
            <el-table-column
                prop="category.name"
                label="所属分类"
                width="200">
            </el-table-column>
            <el-table-column
                prop="publishTime"
                label="发布时间"
                width='200'>
            </el-table-column>
            <el-table-column
                prop="readTimes"
                label="阅读次数"
                width='80'>
            </el-table-column>
            <el-table-column
                prop="thumpUp"
                label="点赞"
                width='80'>
            </el-table-column>
            <el-table-column
                prop="status"
                label="状态"
                width='80'>
            </el-table-column>
            <el-table-column
                label="操作"
                width='150'>
                <template v-slot='scope'>
                    <span @click='toDelete(scope.row)'>删除</span>
                    <span @click="toEdit(scope.row)">修改</span>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
            layout="prev, pager, next"
            :page-size='params.pageSize'
            :current-page='params.page'
            @current-change='pageChange'
            :total="total">
        </el-pagination>

        <!-- 模态框 -->
        <el-dialog title="发布新闻资讯" :visible.sync="dialogFormVisible" width='80%'>
            <el-form>
                <el-form-item label="新闻标题" :label-width="formLabelWidth">
                    <el-input v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所属分类" :label-width="formLabelWidth">
                    <el-select v-model="form.categoryId" placeholder="请选择所属分类">
                        <el-option v-for='item in categories' :key='item.id' :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="新闻内容" :label-width="formLabelWidth">
                    <Tinymce v-model="form.content" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveNews">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// 导入自定义组件
import Tinymce from '@/components/Tinymce'
import axios from '@/http/axios'
import qs from 'qs'
export default {
    // 注册组件
    components: {
        Tinymce
    },
    data(){
        return {
            params:{
                page:1,
                pageSize:5
            },
            tableData:[],
            total:0,
            categories:[],
            form:{},
            formLabelWidth:'120px',
            dialogFormVisible:false
        }
    },
    created(){
        this.queryNews()
        this.findAllCategory()
    },
    watch: {
        // 监听parmas对象
        params:{
            handler:function(){
                this.queryNews()
            },
            deep:true
        }
    },
    methods:{
        // 删除
        toDelete(item){
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 封装参数
                let obj = {
                    id:item.id
                }
                axios({
                    url:'http://121.199.29.84:8001/article/deleteById',
                    method: 'get',
                    params:obj
                }).then((res)=>{
                    this.$notify({
                        title: '成功',
                        message: res.data.message,
                        type: 'success'
                    });
                    this.queryNews()
                })
            }).catch(() => {
                this.$notify({
                    title: '成功',
                    message: '取消成功',
                    type: 'success'
                });        
            });
            
        },
        // 修改
        toEdit(item){
            // 显示模态框
            this.dialogFormVisible = true;
            // 将当前行数据放入模态框
            this.form = JSON.parse(JSON.stringify(item))
            // 引用数据类型的传递
            // 值传递和引用传递
        },
        // 保存新闻
        saveNews(){
            axios({
                url:'http://121.199.29.84:8001/article/saveOrUpdate',
                method:'post',
                data:qs.stringify(this.form),
                contentType:'application/x-www-form-urlencoded'
            }).then((res)=>{
                this.$notify({
                    title: '成功',
                    message: res.data.message,
                    type: 'success'
                });
                this.queryNews()
            })
            this.dialogFormVisible = false;
        },
        addHandler(){
            // 显示模态框
            this.dialogFormVisible = true
            // 清空表单
            this.form = {}
        },
        // 查询所有栏目
        findAllCategory(){
            axios({
                url:'http://121.199.29.84:8001/category/findAll',
                method: 'GET',
            }).then((res)=>{
                this.categories = res.data.data
            })
        },
        // 分页页码改变
        pageChange(page){
            this.params.page = page
        },
        // 分页查询所有的新闻
        queryNews(){
            axios({
                url:'http://121.199.29.84:8001/article/pageQuery',
                method: 'GET',
                params:this.params
            }).then((res)=>{
                this.tableData = res.data.data.list
                this.total = res.data.data.total
            })
        }
    }
}
</script>